/*
 * @Author: xiehangyun 
 * @Date: 2025-05-16 10:32:52 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2025-09-15 18:29:38
 */
import { Button, DatePicker } from '@nutui/nutui-react-taro';
import { Text, View } from '@tarojs/components';
import Taro, { useDidShow } from '@tarojs/taro';
import { toJS } from 'mobx';
import { observer } from "mobx-react-lite";
import { ReactNode, useState } from 'react';
import CustomHeader from 'src/components/CustomHeader/CustomHeader';
import MyEmpty from 'src/components/MyEmpty/MyEmpty';
import MyScrollView from 'src/components/MyScrollView/MyScrollView';
import utils from 'src/utils/utils';
import styles from './myWalletApi.module.less'; // 修改为模块化样式
import myWalletStore from './myWalletStore';

interface Iprops {
    children?: ReactNode
}

// 我的钱包
const MyWallet = observer((props: Iprops) => {

    const [showDatePicker, setShowDatePicker] = useState(false);

    const getStatusText = (status: string) => {
        return {
            'WAIT_CHECK': '待审核',
            'CASH_OUTING': '处理中',
            'CHECK_FAIL': '审核失败',
            'CASH_OUT_SUCCESS': '提现成功',
            'CASH_OUT_FAIL': '提现失败'
        }[status] || '';
    };

    useDidShow(() => {
        myWalletStore.getMoney();
        myWalletStore.getNextWithdrawal(true);
    });


    return (
        <View className={styles.myWallet}>
            {/* 自定义头部 */}
            <CustomHeader
                showBack
                title="我的钱包"
            />
            {/* 余额卡片 */}
            <View className={styles.balanceCard}>
                <View className={styles.balanceInfo}>
                    <View className={styles.balanceLabel}>账户余额</View>
                    <View className={styles.balanceAmount}>¥{myWalletStore.money}</View>
                </View>
                {
                    myWalletStore.money > 0 &&
                    <Button
                        disabled={myWalletStore.money <= 0}
                        type={myWalletStore.money <= 0 ? "default" : "primary"}
                        onClick={() => {
                            if (myWalletStore.money > 0) {
                                Taro.navigateTo({ url: '/subPages/Withdrawal/Withdrawal' });
                            }
                        }}
                    >
                        提现
                    </Button>
                }
            </View>

            {/* 收支明细标题和Tab切换 */}
            <View className={styles.sectionHeader}>
                <View className={styles.sectionTitle}>提现记录</View>
                <View
                    className={styles.datePicker}
                    onClick={() => setShowDatePicker(true)}
                >
                    <Button type='primary' size='small' >{myWalletStore.year && myWalletStore.month ? `${myWalletStore.year}年${myWalletStore.month}月` : `选择日期`}</Button>
                    <DatePicker
                        title="日期选择"
                        type='year-month'
                        visible={showDatePicker}
                        pickerProps={{
                            popupProps: { zIndex: 1220 },
                        }}
                        startDate={new Date(2025, 0, 1)}
                        endDate={new Date()}
                        defaultValue={new Date()}
                        showChinese
                        onCancel={() => setShowDatePicker(false)}
                        onConfirm={(options, values) => {
                            const [year, month] = values as Array<number>;
                            myWalletStore.setDate(year, month);
                            setShowDatePicker(false);
                        }}
                    />
                </View>
            </View>

            {/* 收支明细列表 */}
            {
                toJS(myWalletStore.withdrawalList).length > 0 &&
                <MyScrollView
                    className={styles.transactionList}
                >
                    {
                        toJS(myWalletStore.withdrawalList).map((item, i) => {
                            return (
                                <View key={item.id} className={styles.transactionItem}>
                                    <View className={styles.transactionHeader}>
                                        <View className={styles.amount}>
                                            ¥{item.cashOutMoney.toFixed(2)}
                                        </View>
                                        <View className={`${styles.status} ${styles[item.applyState.toLowerCase()]}`}>
                                            {getStatusText(item.applyState)}
                                        </View>
                                    </View>
                                    <View className={styles.transactionDetails}>
                                        <View className={styles.detailRow}>
                                            <Text>{"交易号:"}</Text>
                                            <Text>{item.businessCode}</Text>
                                        </View>
                                        <View className={styles.detailRow}>
                                            <Text>{"申请时间:"}</Text>
                                            <Text>{new Date(item.applyTime).toLocaleString()}</Text>
                                        </View>
                                    </View>
                                    {(item.applyState === 'CHECK_FAIL' || item.applyState === 'CASH_OUT_FAIL') && (
                                        <View className={styles.failReason}>
                                            {"失败原因:"}{item.failReason}
                                        </View>
                                    )}
                                    {(item.applyState === 'CASH_OUT_SUCCESS' && item.successPicture) && (
                                        <View className={styles.transferProof}>
                                            <Button
                                                type="primary"
                                                size="small"
                                                onClick={() => {
                                                    if (!item.successPicture) {
                                                        Taro.previewImage({
                                                            urls: [utils.ossSuffix(item.successPicture)],
                                                            current: utils.ossSuffix(item.successPicture)
                                                        })
                                                    }
                                                }}
                                            >
                                                转账凭证
                                            </Button>
                                        </View>
                                    )
                                    }
                                </View>
                            )
                        })
                    }
                </MyScrollView>
            }

            {
                toJS(myWalletStore.withdrawalList).length === 0 &&
                <MyEmpty
                    style={{
                        backgroundColor: '#fff',
                        borderRadius: "40rpx",
                        height: "calc(100vh - 530rpx)"
                    }}
                    description="暂无提现记录"
                    actions={[
                        {
                            text: '去推广',
                            onClick: () => {
                                Taro.navigateTo({
                                    url: '/subPages/MyPromotion/MyPromotion'
                                });
                            }
                        }
                    ]}
                />
            }

        </View >
    );
});

export default MyWallet;